$(document).ready(function() {
	/*
	 * $('.cropbox').imgAreaSelect( { onSelectEnd : cropMe, handles : true });
	 */
	/* ejected $('#UPL9').MultiFile( {
		STRING : {
			// file : '<em title="Click to remove"
			// onclick="$(this).parent().prev().click()">$file</em>',
			remove : '<img src="../img/remove.png" alt="X" title="remove"/>'
		}
	});
	*/
	$('.gallery').addClass('galleria'); // adds new class name
		// to maintain
		// degradability

		$('ul.gallery').galleria(
				{
					history : false, // activates the history
					// object for
					// bookmarking,
					// back-button etc.
					clickNext : true, // helper for making
					// the image
					// clickable
					insert : '#main_image', // the
					// containing
					// selector for
					// our main
					// image
					onImage : function(image, caption, thumb) { // let's add
																// some
						// image effects for
						// demonstration
						// purposes
						image.attr('id', thumb.attr('id'));
						// fade in the image & caption
						if (!($.browser.mozilla && navigator.appVersion
								.indexOf("Win") != -1)) { // FF/Win
							// fades
							// large
							// images
							// terribly
							// slow
							image.css('display', 'none').fadeIn(1000);
						}
						caption.css('display', 'none').fadeIn(1000);

						// fetch the thumbnail container
						var _li = thumb.parents('li');

						// fade out inactive thumbnail
						_li.siblings().children('img.selected')
								.fadeTo(500, 0.3);

						// fade in active thumbnail
						thumb.fadeTo('fast', 1).addClass('selected');

						// add a title for the clickable
						// image
						/*
						 * ram image .attr('title', 'Next image >>');ram
						 */

						/*
						 * $('.replaced').imgAreaSelect( { onSelectEnd : cropMe,
						 * handles : true
						 * 
						 * });
						 */
						if ($('#ImagesW').val() > 0) {
							jQuery('.replaced').Jcrop(
									{
										setSelect : [
												$('#ImagesX').val(),
												$('#ImagesY' ).val(),
												$('#ImagesX2').val(),
												$('#ImagesY2').val() ],
										onSelect : function(selection) {
											$('#ImagesX').val(
													selection.x);
											$('#ImagesY').val(
													selection.y);
											$('#ImagesX2').val(
													selection.x2);
											$('#ImagesY2').val(
													selection.y2);
											$('#ImagesW').val(
													selection.w);
											$('#ImagesH').val(
													selection.h);
										}
									});
						} else {
							jQuery('.replaced').Jcrop( {
								onSelect : function(selection) {
									$('#ImagesX').val(selection.x);
									$('#ImagesY').val(selection.y);
									$('#ImagesX2').val(selection.x2);
									$('#ImagesY2').val(selection.y2);
									$('#ImagesW').val(selection.w);
									$('#ImagesH').val(selection.h);
								}
							});
						}
					},
					onThumb : function(thumb) { // thumbnail
						// effects
						// goes here
						// $('.replaced').imgAreaSelect({disable:true,hide:true});
						// fetch the thumbnail container
						var _li = thumb.parents('li');

						// if thumbnail is active, fade all
						// the way.
						var _fadeTo = _li.is('.active') ? '1' : '0.3';

						// fade in the thumbnail when
						// finnished loading
						thumb.css( {
							display : 'none',
							opacity : _fadeTo
						}).fadeIn(1500);

						// hover effects
						thumb.hover(function() {
							thumb.fadeTo('fast', 1);
						}, function() {
							_li.not('.active').children('img').fadeTo('fast',
									0.3);
						} // don't fade out if the parent
						// is active
								)
					}
				});

		$(":submit").addClass('blue small awesome');
		// this sets up the progress bar
		$("#uploadprogressbar").progressBar();
		// $('li').qtip({
		// content: 'This is an active list element',
		// show: 'mouseover',
		// hide: 'mouseout'
		// });

	});
function cropMe(selection, index) {
	alert(index + " : " + selection.w + ", " + selection.height);
	$('#ImagesX').val(selection.x);
	$('#ImagesY').val(selection.y);
	$('#ImagesW').val(selection.w);
	$('#ImagesH').val(selection.h);
}

// fades in the progress bar and starts polling the upload progress after
// 1.5seconds
function beginUpload() {
	$("#uploadprogressbar").fadeIn();
	setTimeout("showUpload()", 1500);
}
// uses ajax to poll the uploadprogress.php page with the id
// deserializes the json string, and computes the percentage (integer)
// update the jQuery progress bar
// sets a timer for the next poll in 750ms
function showUpload() {
	$.get("uploadprogress.php?id=" + $("#progress_key").val(), function(data) {
		if (!data)
			return;

		var response;
		eval("response = " + data);

		if (!response)
			return;

		var percentage = Math.floor(100 * parseInt(response['bytes_uploaded'])
				/ parseInt(response['bytes_total']));
		$("#uploadprogressbar").progressBar(percentage);

	});
	setTimeout("showUpload()", 750);
}